<!DOCTYPE html>
<html lang="en">
<head>
<title>huangliusong</title>
<script src="./vue.js"></script>
</head>
 
<body>
	<div id="root">
		<counter :count="2" @change="handleChange"></counter>
		<counter :count="3" @change="handleChange"></counter>
		<div>{{total}}</div>
	</div>

	<script type="text/javascript">
		var counter={ 
			props:['count'],
			data:function(){
				return{
					number:this.count
				}
			},
			template:"<div @click='handleClick'>{{number}}</div>",
			methods:{
				handleClick:function(){
					this.number++
					this.$emit('change',1)
				}
			}
		}
		var vm=new Vue({
			el:"#root",
			data:{
				total:5
			},
			components:{
				counter:counter
			},
			methods:{
				handleChange:function(step){
					this.total+=step
				}
			}
		})
	</script>
</body>

</html>